<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 1000px;
            height: 1000px;
            margin: 50px auto;
            border: 1px solid red;
        }

        .snake {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .food {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 50px;
            height: 50px;
            background-color: pink;
        }

        .body {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: green;
        }
        footer  {
            color:black;
            font-size: 2em;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="body"></div>
        <!--由于two的style样式使用dom.style获取不到，就写到了行内样式中-->
        <div class="body" id="two" style="top:0px;left:50px"></div>
        <div class="snake"></div>
        <div class="food"></div>
    </div>
    <footer>
        <span>游戏操作：使用键盘的wasd来控制方向。</span></br>
         <span>作者:陈子豪</span></footer>
</body>
<script src="index.js"></script>

</html>
